<template>
  <view>
    <my-message-top :text="'发布文章'"></my-message-top>
    
    <view class="chooseImage">
    				<uni-file-picker limit="6" title="最多选择6张图片" file-mediatype="image" 
            @select="select" 
            ></uni-file-picker>
    			</view>
    
    <view class="message-detail">
      <uni-easyinput @input="input1" v-model="value1" placeholder="标题" maxlength=20></uni-easyinput>
<uni-easyinput @input="input2" type="textarea" autoHeight v-model="value2" placeholder="添加正文" maxlength=2000></uni-easyinput>

    </view>
    
    <view class="message-sort">
      <view class="message-sort-top">
        <text>发布类型</text>
        <image src="/static/article/left1_right-one.png" mode=""></image>
      </view>
      <view class="message-sort-main">
        <view class="message-sort-box" @click="this.module = 1,showClass('已选择领养类别')">
          <image src="/static/article/sub10.png" mode=""></image>
          <text>领养</text>
        </view>
        <view class="message-sort-box" @click="this.module = 2,showClass('已选择问答类别')">
          <image src="/static/article/sub11.png" mode=""></image>
          <text>问答</text>
        </view>
        <view class="message-sort-box" @click="this.module = 3,showClass('已选择志愿类别')">
          <image src="/static/article/sub10.png" mode=""></image>
          <text>志愿</text>
        </view>
        <view class="message-sort-box" @click="this.module = 4, showClass('已选择其他类别')">
          <image src="/static/article/sub13.png" mode=""></image>
          <text>其他</text>
        </view>
      </view>
    </view>
    
    <view class="message-btm">
      <view class="message-btm-left" @click="gotodraft()">
        <text>存草稿</text>
      </view>
      <view class="message-btm-right" @click="pubMes()">
        <text>发布</text>
      </view>
    </view>
  </view>
</template>

<script>
  import {pubMes,saveDraft} from '../../api/article.js'
  export default {
    data() {
      return {
        files: [],
        kw1: '',
        kw2: '',
        timer: null,
        module: 2,
        imageValue:[],
        value1: '',
        value2: ''
      };
    },
    methods:{
      			async select(e){
      				console.log('选择文件：',e)
              const token = uni.getStorageSync('token')
              this.imageValue = e.tempFilePaths
              console.log(this.imageValue);
              for(let i = 0;i < this.imageValue.length;i++){
                const data = await uni.uploadFile({
                    url: 'http://www.newbabyya.com/article/uploadArticleImg', 
                    filePath: this.imageValue[i],   
                    name: 'file',  
                    method: 'post',
                    header:{
                          'Authorization': token
                          } 
                });  
                console.log(data);
                console.log(JSON.parse(data[1].data).data);
                this.files.push(JSON.parse(data[1].data).data)
              }
              console.log(this.files);
            },
      showClass(item){
        return uni.$showMsg(item)
      },
      input1(e){
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{
          this.kw1 = e
          console.log(this.kw1);
        },500)
      },
      input2(e){
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{
          this.kw2 = e
          console.log(this.kw2);
        },500)
      },
      async pubMes(){
        console.log(this.module);
        this.value1 = '',
        this.value2 = ''
        const formData = {
              title: this.kw1,
              content: this.kw2,
              files: this.files,
              module: this.module
            }
            console.log(this.files);
            console.log(formData);
        const {data:data} = await pubMes(formData)
        console.log(data);
        if(data.code === 200) return uni.$showMsg('发布文章成功')
      },
     async gotodraft(){
        const {data:data} = await saveDraft(this.kw1,this.kw2,this.files,this.module)
        this.value1 = '',
        this.value2 = ''
        if(data.code === 200) return uni.$showMsg('保存草稿成功')
      }
    }
  }
</script>

<style lang="scss">
.chooseImage{
  margin: 28rpx 28rpx;
  image{
    width: 262rpx;
    height: 262rpx;
  }
}

.message-detail{
  width: 700rpx;
  
  margin-left: 28rpx;
  
  .uni-easyinput{
    width: 700rpx;
  }
}

.message-sort{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 700rpx;
  height: 198rpx;
 
  margin: 25rpx 25rpx;
  z-index: -999;
  .message-sort-top{
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 25rpx;
    text{
      font-size: 18px;
      font-weight: bold;
      color: #515151;
    }
    image{
      width: 28rpx;
      height: 28rpx;
    }
  }
  .message-sort-main{
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    .message-sort-box{
      position: relative;
      image{
        position: absolute;
        width: 84rpx;
        height: 33rpx;
        z-index: -1;
        top: -20rpx;
        left: -8rpx;
      }
      text{
        font-size: 16px;
        color: #515151;
        z-index: 2;
      }
    }
  }
}

.message-btm{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 15rpx;
  left: 25rpx;
  .message-btm-left{
    width: 114rpx;
    height: 94rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    text{
      font-size: 12px;
      color: #515151;
      line-height: 94rpx;
      text-align: center;
    }
  }
  .message-btm-right{
    width: 570rpx;
    height: 94rpx;
    background-color: #F0E1C4;
    display: flex;
    justify-content: center;
    text{
      font-style: 18px;
      color: #515151;
      line-height: 94rpx;
      text-align: center;
    }
  }
}
</style>
